export function yzm(val) {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    if(val==1){
        draw()
    }
    canvas.onclick = function () {
        context.clearRect(0, 0, 120, 40);
        draw();
         
    }
    function getColor() {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
    }
    function draw() {
        context.strokeRect(0, 15, 120, 40);
        var aCode = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
        var arr = [] 
        var num 
        for (var i = 0; i < 4; i++) {
            var x = 20 + i * 20;
            var y = 20 + 10 * Math.random();
            var index = Math.floor(Math.random() * aCode.length);
            var txt = aCode[index];
            context.font = "bold 20px 微软雅黑";
            context.fillStyle = getColor();
            context.translate(x, y);
            var deg = 90 * Math.random() * Math.PI / 180;
            context.rotate(deg);
            context.fillText(txt, 0, 0);
            context.rotate(-deg);
            context.translate(-x, -y);
            arr[i] = txt 
        }
        num = arr[0] + arr[1] + arr[2] + arr[3] 
        for (var i = 0; i < 8; i++) {
            context.beginPath();
            context.moveTo(Math.random() * 120, Math.random() * 40);
            context.lineTo(Math.random() * 120, Math.random() * 40);
            context.strokeStyle = getColor();
            context.stroke();
        }
        for (var i = 0; i < 20; i++) {
            context.beginPath();
            var x = Math.random() * 120;
            var y = Math.random() * 40;
            context.moveTo(x, y);
            context.lineTo(x + 1, y + 1);
            context.strokeStyle = getColor();
            context.stroke();
        }

        sessionStorage.setItem('yzm',num)

    }
}